<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="index.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>DaLao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">用户资料</h5>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">用户资料</li>
                    </ul>
                </nav>
            </div>
            <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="iq-card">
                        <div class="iq-card-body profile-page p-0">
                            <div class="profile-header">
                                <div class="cover-container">
                                    <img src="../src/images/page-img/profile-bg.jpg" alt="profile-bg"
                                         class="rounded img-fluid">
                                    <ul class="header-nav d-flex flex-wrap justify-end p-0 m-0">
                                        <li><a href="javascript:void(0);"><i class="ri-pencil-line"></i></a></li>
                                        <li><a href="javascript:void(0);"><i class="ri-settings-4-line"></i></a></li>
                                    </ul>
                                </div>
                                <div class="profile-info p-4">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-6">
                                            <div class="user-detail pl-5">
                                                <div class="d-flex flex-wrap align-items-center">
                                                    <div class="profile-img pr-4">
                                                        <img src="../src/images/user/11.jpg" alt="profile-img"
                                                             class="avatar-130 img-fluid"/>
                                                    </div>
                                                    <div class="profile-detail d-flex align-items-center">
                                                        <h3>DaLao</h3>
                                                        <p class="m-0 pl-3"> - 后端java开发工程师</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-6">
                                            <ul class="nav nav-pills d-flex align-items-end float-right profile-feed-items p-0 m-0">
                                                <li>
                                                    <a class="nav-link active" data-toggle="pill" href="#profile-feed">互动</a>
                                                </li>
                                                <li>
                                                    <a class="nav-link" data-toggle="pill"
                                                       href="#profile-activity">活动</a>
                                                </li>
                                                <li>
                                                    <a class="nav-link" data-toggle="pill"
                                                       href="#profile-friends">朋友</a>
                                                </li>
                                                <li>
                                                    <a class="nav-link" data-toggle="pill"
                                                       href="#profile-profile">简述</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-lg-3 profile-left">
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">新闻</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <ul class="m-0 p-0">
                                        <li class="d-flex mb-2">
                                            <div class="news-icon"><i class="ri-chat-4-fill"></i></div>
                                            <p class="news-detail mb-0">在你的城市里有个聚会
                                                19:00.<a href="#">&nbsp;&nbsp;查看详细信息</a></p>
                                        </li>
                                        <li class="d-flex">
                                            <div class="news-icon mb-0"><i class="ri-chat-4-fill"></i></div>
                                            <p class="news-detail mb-0">优惠20%的优惠券
                                                制药公司</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">画廊</h4>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                        <p class="m-0">132张照片</p>
                                    </div>
                                </div>
                                <div class="iq-card-body p-0">
                                    <ul class="profile-img-gallary d-flex flex-wrap p-0 m-0">
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-1"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g1.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-1"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g2.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-1"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g3.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-1"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g4.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-1"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g5.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-1"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g6.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-0"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g7.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-0"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g8.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                        <li class="col-md-4 col-6 pl-1 pr-0 pb-0"><a href="javascript:void(0);"><img
                                                src="../src/images/page-img/g9.jpg" alt="gallary-image" class="img-fluid"/></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">Twitter订阅源</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <div class="twit-feed">
                                        <div class="media-support-header mb-2">
                                            <div class="media-support-user-img mr-3">
                                                <img class="rounded-circle img-fluid" src="../src/images/user/01.jpg" alt="">
                                            </div>
                                            <div class="media-support-info">
                                                <h6 class="mb-0"><a href="#" class="">安娜·塞西娅</a></h6>
                                                <p>@anna59 <span><i class="ri-check-fill"></i> </span></p>
                                            </div>
                                        </div>
                                        <div class="media-support-body">
                                            <p class="mb-0">Lorem Ipsum只是印刷和
                                                排版业</p>
                                            <div class="d-flex flex-wrap">
                                                <a href="#" class="twit-meta-tag pr-2">#Html</a>
                                                <a href="#" class="twit-meta-tag pr-2">#Bootstrap</a>
                                            </div>
                                            <div class="twit-date"><a href="#">2020年1月7日</a></div>
                                        </div>
                                    </div>
                                    <hr class="mt-4 mb-4">
                                    <div class="twit-feed">
                                        <div class="media-support-header mb-2">
                                            <div class="media-support-user-img mr-3">
                                                <img class="rounded-circle img-fluid" src="../src/images/user/02.jpg" alt="">
                                            </div>
                                            <div class="media-support-info">
                                                <h6 class="mb-0"><a href="#" class="">佩奇·特纳</a></h6>
                                                <p>@paige30 <span><i class="ri-check-fill"></i> </span></p>
                                            </div>
                                        </div>
                                        <div class="media-support-body">
                                            <p class="mb-0">Lorem Ipsum只是印刷和
                                                排版业</p>
                                            <div class="d-flex flex-wrap">
                                                <a href="#" class="twit-meta-tag pr-2">#Js</a>
                                                <a href="#" class="twit-meta-tag pr-2">#Bootstrap</a>
                                            </div>
                                            <div class="twit-date"><a href="#">2020年1月7日</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 profile-center">
                            <div class="tab-content">
                                <div class="tab-pane fade active show" id="profile-feed" role="tabpanel">
                                    <div class="iq-card">
                                        <div class="iq-card-body p-0">
                                            <div class="user-post-data p-3">
                                                <div class="d-flex flex-wrap">
                                                    <div class="media-support-user-img mr-3">
                                                        <img class="rounded-circle img-fluid" src="../src/images/user/01.jpg"
                                                             alt="">
                                                    </div>
                                                    <div class="media-support-info mt-2">
                                                        <h5 class="mb-0"><a href="#" class="">安娜·塞西娅</a></h5>
                                                        <p class="mb-0 text-primary">链接</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton40"
                                                         data-toggle="dropdown">
                                                      <a href="#" class="text-secondary">29分钟 <i
                                                              class="ri-more-2-line ml-3"></i></a>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#">
                                                                    <i class="ri-user-unfollow-line mr-2"></i>展开
                                                                </a>
                                                                <a class="dropdown-item" href="#">
                                                                    <i class="ri-share-forward-line mr-2"></i>分享
                                                                </a>
                                                                <a class="dropdown-item" href="#">
                                                                    <i class="ri-file-copy-line mr-2"></i>复制链接
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="user-post">
                                                <a href="javascript:void(0);">
                                                    <img src="../src/images/page-img/p1.jpg" alt="post-image"
                                                         class="img-fluid"/>
                                                </a>
                                            </div>
                                            <div class="comment-area p-3">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div class="d-flex align-items-center">
                                                        <div class="d-flex align-items-center feather-icon mr-3">
                                                            <a href="javascript:void(0);"><i
                                                                    class="ri-heart-line"></i></a>
                                                            <span class="ml-1">140</span>
                                                        </div>
                                                        <div class="d-flex align-items-center message-icon">
                                                            <a href="javascript:void(0);"><i class="ri-chat-4-line"></i></a>
                                                            <span class="ml-1">140</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <div class="iq-media-group">
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/05.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/06.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/07.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/08.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/09.jpg" alt="">
                                                            </a>
                                                        </div>
                                                        <span class="ml-2">+140多个</span>
                                                    </div>
                                                </div>
                                                <hr>
                                                <p>如果他是在帮助他，如果他愿意的话。取消

                                                    痛苦，装饰和准将，不是假装而是。福西布斯相赛勒斯

                                                    落后的莫利斯。它是白色和巨大的，但它是红色的。</p>
                                                <hr>
                                                <ul class="post-comments p-0 m-0">
                                                    <li class="mb-2">
                                                        <div class="d-flex flex-wrap">
                                                            <div class="user-img">
                                                                <img src="../src/images/user/02.jpg" alt="userimg"
                                                                     class="avatar-35 rounded-circle img-fluid">
                                                            </div>
                                                            <div class="comment-data-block ml-3">
                                                                <h6>蒙蒂·卡罗</h6>
                                                                <p class="mb-0">他一定很痛苦</p>
                                                                <div class="d-flex flex-wrap align-items-center comment-activity">
                                                                    <a href="javascript:void(0);">喜欢</a>
                                                                    <a href="javascript:void(0);">回复</a>
                                                                    <a href="javascript:void(0);">翻译</a>
                                                                    <span> 5分钟</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="d-flex flex-wrap">
                                                            <div class="user-img">
                                                                <img src="../src/images/user/03.jpg" alt="userimg"
                                                                     class="avatar-35 rounded-circle img-fluid">
                                                            </div>
                                                            <div class="comment-data-block ml-3">
                                                                <h6>保罗·莫利夫</h6>
                                                                <p class="mb-0">他一定很痛苦</p>
                                                                <div class="d-flex flex-wrap align-items-center comment-activity">
                                                                    <a href="javascript:void(0);">喜欢</a>
                                                                    <a href="javascript:void(0);">回复</a>
                                                                    <a href="javascript:void(0);">翻译</a>
                                                                    <span> 5分钟</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <form class="comment-text d-flex align-items-center mt-3"
                                                      action="javascript:void(0);">
                                                    <input type="text" class="form-control rounded"
                                                           placeholder="评论...">
                                                    <div class="comment-attagement d-flex">
                                                        <a href="javascript:void(0);"><i
                                                                class="ri-user-smile-line mr-2"></i></a>
                                                        <a href="javascript:void(0);"><i
                                                                class="ri-camera-line mr-2"></i></a>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="iq-card">
                                        <div class="iq-card-body p-0">
                                            <div class="user-post-data p-3">
                                                <div class="d-flex flex-wrap">
                                                    <div class="media-support-user-img mr-3">
                                                        <img class="rounded-circle img-fluid" src="../src/images/user/02.jpg"
                                                             alt="">
                                                    </div>
                                                    <div class="media-support-info mt-2">
                                                        <h5 class="mb-0"><a href="#" class="">珍妮，天哪</a></h5>
                                                        <p class="mb-0 text-primary">colleages</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton-40"
                                                         data-toggle="dropdown">
                                                      <a href="#" class="text-secondary">1小时<i
                                                              class="ri-more-2-line ml-3"></i></a>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-user-unfollow-line mr-2"></i>展开</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-share-forward-line mr-2"></i>分享</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-file-copy-line mr-2"></i>复制链接</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="mt-0">
                                            <p class="p-3 mb-0">如果他在痛苦中，他会被认为是有帮助的。

                                                死亡不伤害，装饰和移动，它不只是飞。相塞勒斯

                                                莫利斯海雀向后。它是白色和巨大的，但它是红色的。</p>

                                            <div class="comment-area p-3">
                                                <hr class="mt-0">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div class="d-flex align-items-center">
                                                        <div class="d-flex align-items-center feather-icon mr-3">
                                                            <a id="clickme" href="javascript:void(0);"><i
                                                                    class="ri-heart-line"></i></a>
                                                            <span class="ml-1">140</span>
                                                        </div>
                                                        <div class="d-flex align-items-center message-icon">
                                                            <a href="javascript:void(0);"><i class="ri-chat-4-line"></i></a>
                                                            <span class="ml-1">140</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <div class="iq-media-group">
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/05.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/06.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/07.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/08.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/09.jpg" alt="">
                                                            </a>
                                                        </div>
                                                        <span class="ml-2">+140多个</span>
                                                    </div>
                                                </div>
                                                <form class="comment-text d-flex align-items-center mt-3"
                                                      action="javascript:void(0);">
                                                    <input type="text" class="form-control rounded"
                                                           placeholder="评论...">
                                                    <div class="comment-attagement d-flex">
                                                        <a href="javascript:void(0);"><i
                                                                class="ri-user-smile-line mr-2"></i></a>
                                                        <a href="javascript:void(0);"><i
                                                                class="ri-camera-line mr-2"></i></a>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile-activity" role="tabpanel">
                                    <div class="iq-card">
                                        <div class="iq-card-header d-flex justify-content-between">
                                            <div class="iq-header-title">
                                                <h4 class="card-title">活动时间表</h4>
                                            </div>
                                            <div class="iq-card-header-toolbar d-flex align-items-center">
                                                <div class="dropdown">
                                             <span class="dropdown-toggle text-primary" id="dropdownMenuButton5"
                                                   data-toggle="dropdown">
                                             全部视图
                                             </span>
                                                    <div class="dropdown-menu dropdown-menu-right p-0">
                                                        <a class="dropdown-item" href="#"><i
                                                                class="ri-user-unfollow-line mr-2"></i>视图</a>
                                                        <a class="dropdown-item" href="#"><i
                                                                class="ri-close-circle-line mr-2"></i>删除</a>
                                                        <a class="dropdown-item" href="#"><i
                                                                class="ri-pencil-fill mr-2"></i>编辑</a>
                                                        <a class="dropdown-item" href="#"><i
                                                                class="ri-printer-fill mr-2"></i>打印</a>
                                                        <a class="dropdown-item" href="#"><i
                                                                class="ri-file-download-fill mr-2"></i>下载</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="iq-card-body">
                                            <ul class="iq-timeline">
                                                <li>
                                                    <div class="timeline-dots"></div>
                                                    <h6 class="float-left mb-1">客户端登录</h6>
                                                    <small class="float-right mt-1">2019年11月24日</small>
                                                    <div class="d-inline-block w-100">
                                                        <p>棒棒糖杏仁饼果冻豆子口香糖熊果冻棒棒糖苹果</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="timeline-dots border-success"></div>
                                                    <h6 class="float-left mb-1">定期维护</h6>
                                                    <small class="float-right mt-1">2019年11月23日</small>
                                                    <div class="d-inline-block w-100">
                                                        <p>棒棒糖杏仁饼果冻豆子口香糖熊果冻棒棒糖苹果</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="timeline-dots border-danger"></div>
                                                    <h6 class="float-left mb-1">开发人员会议</h6>
                                                    <small class="float-right mt-1">2019年11月20日</small>
                                                    <div class="d-inline-block w-100">
                                                        <p>棒棒糖杏仁饼果冻豆子口香糖熊果冻棒棒糖苹果</p>
                                                        <div class="iq-media-group">
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/05.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/06.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/07.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/08.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/09.jpg" alt="">
                                                            </a>
                                                            <a href="#" class="iq-media">
                                                                <img class="img-fluid avatar-40 rounded-circle"
                                                                     src="../src/images/user/10.jpg" alt="">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="timeline-dots border-primary"></div>
                                                    <h6 class="float-left mb-1">客户电话</h6>
                                                    <small class="float-right mt-1">2019年11月19日</small>
                                                    <div class="d-inline-block w-100">
                                                        <p>棒棒糖杏仁饼果冻豆子口香糖熊果冻棒棒糖苹果</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="timeline-dots border-warning"></div>
                                                    <h6 class="float-left mb-1">大型活动</h6>
                                                    <small class="float-right mt-1">2019年11月15日</small>
                                                    <div class="d-inline-block w-100">
                                                        <p>棒棒糖杏仁饼果冻豆子口香糖熊果冻棒棒糖苹果</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile-friends" role="tabpanel">
                                    <div class="iq-card">
                                        <div class="iq-card-header d-flex justify-content-between">
                                            <div class="iq-header-title">
                                                <h4 class="card-title">朋友</h4>
                                            </div>
                                        </div>
                                        <div class="iq-card-body">
                                            <ul class="suggestions-lists m-0 p-0">
                                                <li class="d-flex mb-4 align-items-center">
                                                    <div class="user-img img-fluid"><img src="../src/images/user/01.jpg"
                                                                                         alt="story-img"
                                                                                         class="rounded-circle avatar-40">
                                                    </div>
                                                    <div class="media-support-info ml-3">
                                                        <h6>保罗·莫利夫</h6>
                                                        <p class="mb-0">网页设计师</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton-50"
                                                         data-toggle="dropdown">
                                                      <i class="ri-more-2-line"></i>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-user-unfollow-line mr-2"></i>展开</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-close-circle-line mr-2"></i>解除好友关系</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-lock-line mr-2"></i>块</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="d-flex mb-4 align-items-center">
                                                    <div class="user-img img-fluid"><img src="../src/images/user/01.jpg"
                                                                                         alt="story-img"
                                                                                         class="rounded-circle avatar-40">
                                                    </div>
                                                    <div class="media-support-info ml-3">
                                                        <h6>保罗·莫利夫</h6>
                                                        <p class="mb-0">练习生</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton41"
                                                         data-toggle="dropdown">
                                                   <i class="ri-more-2-line"></i>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-user-unfollow-line mr-2"></i>展开</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-close-circle-line mr-2"></i>解除好友关系</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-lock-line mr-2"></i>块</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="d-flex mb-4 align-items-center">
                                                    <div class="user-img img-fluid"><img src="../src/images/user/02.jpg"
                                                                                         alt="story-img"
                                                                                         class="rounded-circle avatar-40">
                                                    </div>
                                                    <div class="media-support-info ml-3">
                                                        <h6>安娜·穆尔</h6>
                                                        <p class="mb-0">网页设计师</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton42"
                                                         data-toggle="dropdown">
                                                   <i class="ri-more-2-line"></i>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-user-unfollow-line mr-2"></i>展开</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-close-circle-line mr-2"></i>解除好友关系</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-lock-line mr-2"></i>块</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="d-flex mb-4 align-items-center">
                                                    <div class="user-img img-fluid"><img src="../src/images/user/03.jpg"
                                                                                         alt="story-img"
                                                                                         class="rounded-circle avatar-40">
                                                    </div>
                                                    <div class="media-support-info ml-3">
                                                        <h6>佩奇·特纳</h6>
                                                        <p class="mb-0">练习生</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton43"
                                                         data-toggle="dropdown">
                                                   <i class="ri-more-2-line"></i>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-user-unfollow-line mr-2"></i>展开</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-close-circle-line mr-2"></i>解除好友关系</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-lock-line mr-2"></i>块</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="d-flex mb-4 align-items-center">
                                                    <div class="user-img img-fluid"><img src="../src/images/user/04.jpg"
                                                                                         alt="story-img"
                                                                                         class="rounded-circle avatar-40">
                                                    </div>
                                                    <div class="media-support-info ml-3">
                                                        <h6>倒钩阿克</h6>
                                                        <p class="mb-0">网页设计师</p>
                                                    </div>
                                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                                        <div class="dropdown">
                                                   <span class="dropdown-toggle text-primary" id="dropdownMenuButton44"
                                                         data-toggle="dropdown">
                                                   <i class="ri-more-2-line"></i>
                                                   </span>
                                                            <div class="dropdown-menu dropdown-menu-right p-0">
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-user-unfollow-line mr-2"></i>展开</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-close-circle-line mr-2"></i>解除好友关系</a>
                                                                <a class="dropdown-item" href="#"><i
                                                                        class="ri-lock-line mr-2"></i>块</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-primary d-block"><i
                                                    class="ri-add-line"></i> 加载更多</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile-profile" role="tabpanel">
                                    <div class="iq-card">
                                        <div class="iq-card-header d-flex justify-content-between">
                                            <div class="iq-header-title">
                                                <h4 class="card-title">简况</h4>
                                            </div>
                                        </div>
                                        <div class="iq-card-body">
                                            <div class="user-detail text-center">
                                                <div class="user-profile">
                                                    <img src="../src/images/user/11.png" alt="profile-img"
                                                         class="avatar-130 img-fluid">
                                                </div>
                                                <div class="profile-detail mt-3">
                                                    <h3 class="d-inline-block">大佬</h3>
                                                    <p class="d-inline-block pl-3"> -&numsp;Java后端工程师</p>
                                                    <p class="mb-0">Java程序一直是近年来最主流的后端开发语言 其简单 高效 易用的特点被无数的企业所使用和强化</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="iq-card">
                                        <div class="iq-card-header d-flex justify-content-between">
                                            <div class="iq-header-title">
                                                <h4 class="card-title">关于用户</h4>
                                            </div>
                                        </div>
                                        <div class="iq-card-body">
                                            <div class="user-bio">
                                                <p>游戏爱好者 喜欢听音乐</p>
                                            </div>
                                            <div class="mt-2">
                                                <h6>加入:</h6>
                                                <p>2012年11月15日</p>
                                            </div>
                                            <div class="mt-2">
                                                <h6>生活:</h6>
                                                <p>中华人民共和国</p>
                                            </div>
                                            <div class="mt-2">
                                                <h6>邮箱:</h6>
                                                <p>
                                                    <a href="#"><span>2454148665@qq.com</span></a>
                                                </p>
                                            </div>
                                            <div class="mt-2">
                                                <h6>网址:</h6>
                                                <p>
                                                    <a href="https://getbootstrap.com/docs/4.0/getting-started/introduction/"
                                                       target="_blank"> www.baidu.com </a></p>
                                            </div>
                                            <div class="mt-2">
                                                <h6>联系人:</h6>
                                                <p><a href="tel:0014544565456">13126719772</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 profile-right">
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">关于</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <div class="about-info m-0 p-0">
                                        <div class="row">
                                            <div class="col-12"><p>让他受苦,让他受苦, 精英.</p></div>
                                            <div class="col-3">邮箱:</div>
                                            <div class="col-9"><a
                                                    href="#">
                                                <span>2454148665@qq.com</span>
                                            </a></div>
                                            <div class="col-3">手机:</div>
                                            <div class="col-9"><a href="tel:001235125612">13126719772</a></div>
                                            <div class="col-3">位置:</div>
                                            <div class="col-9">中华人民共和国</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">故事</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <ul class="media-story m-0 p-0">
                                        <li class="d-flex mb-4 align-items-center active">
                                            <img src="../src/images/page-img/s1.jpg" alt="story-img"
                                                 class="rounded-circle img-fluid"/>
                                            <div class="stories-data ml-3">
                                                <h5>网页设计师</h5>
                                                <p class="mb-0">1小时前</p>
                                            </div>
                                        </li>
                                        <li class="d-flex mb-4 align-items-center">
                                            <img src="../src/images/page-img/s2.jpg" alt="story-img"
                                                 class="rounded-circle img-fluid"/>
                                            <div class="stories-data ml-3">
                                                <h5>应用程序设计</h5>
                                                <p class="mb-0">4小时前</p>
                                            </div>
                                        </li>
                                        <li class="d-flex align-items-center">
                                            <img src="../src/images/page-img/s3.jpg" alt="story-img"
                                                 class="rounded-circle img-fluid"/>
                                            <div class="stories-data ml-3">
                                                <h5>抽象设计</h5>
                                                <p class="mb-0">9小时前</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">建议</h4>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                        <a href="#"><i class="ri-more-fill"></i></a>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <ul class="suggestions-lists m-0 p-0">
                                        <li class="d-flex mb-4 align-items-center">
                                            <div class="user-img img-fluid">
                                                <img src="../src/images/user/01.jpg" alt="story-img"
                                                     class="rounded-circle avatar-40"/>
                                            </div>
                                            <div class="media-support-info ml-3">
                                                <h6>保罗·莫利夫</h6>
                                                <p class="mb-0">4个共同的朋友</p>
                                            </div>
                                            <div class="add-suggestion"><a href="javascript:void(0);"><i
                                                    class="ri-user-add-line"></i></a></div>
                                        </li>
                                        <li class="d-flex mb-4 align-items-center">
                                            <div class="user-img img-fluid"><img src="../src/images/user/02.jpg"
                                                                                 alt="story-img"
                                                                                 class="rounded-circle avatar-40"/>
                                            </div>
                                            <div class="media-support-info ml-3">
                                                <h6>安娜·穆尔</h6>
                                                <p class="mb-0">6个共同的朋友</p>
                                            </div>
                                            <div class="add-suggestion"><a href="javascript:void(0);"><i
                                                    class="ri-user-add-line"></i></a></div>
                                        </li>
                                        <li class="d-flex mb-4 align-items-center">
                                            <div class="user-img img-fluid"><img src="../src/images/user/07.jpg"
                                                                                 alt="story-img"
                                                                                 class="rounded-circle avatar-40"/>
                                            </div>
                                            <div class="media-support-info ml-3">
                                                <h6>皮特·萨里娅</h6>
                                                <p class="mb-0">2个共同的朋友</p>
                                            </div>
                                            <div class="add-suggestion"><a href="javascript:void(0);"><i
                                                    class="ri-user-add-line"></i></a></div>
                                        </li>
                                    </ul>
                                    <a href="javascript:void(0);" class="btn btn-primary d-block"><i
                                            class="ri-add-line"></i> 加载更多</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<div id="bottom"></div>
<!-- Footer END -->
</body>
<!-- Optional JavaScript -->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
    $(function () {
        $("#menu").load("menus.html");
        $("#navigation").load("navigation-bar.html");
        $("#bottom").load("bottom-bar.html");
    });
</script>
</html>